<template>
    <div class="fssc-users-choice">
        <div class="fssc-users-choice_main">
            <el-tree :props="props" :height="238" :expand-on-click-node="false" lazy :load="loadNode"
                @node-click="handleNodeClick">
                <template #default="{ node }">
                    <span>{{ node.label }}</span>
                </template>
            </el-tree>
        </div>
    </div>

</template>
<script setup>
import api from '@/api'
const emit = defineEmits(['on-update'])
const props = {
    value: 'id',
    label: 'label'
}

const getDeptList = async (params = {}) => {
    const data = await api.user.user_GetDept(params) || []
    const resultData = data.map((item) => {
        return {
            value: item.value,
            label: item.sapDepartmentName,
            children: item.children,
            id: item.id,
            departmentId: item.departmentId
        }
    })
    return resultData
}
const loadNode = async (node, resolve) => {
    if (node.level === 0) {
        const data = await getDeptList()
        return resolve(data)
    } else {
        let childData = []
        if (node.data) {
            childData = await getDeptList({
                parentId: node.data.value
            })
        }
        return resolve(childData)
    }
}
const handleNodeClick = async (data) => {
    console.log('data',data)
    emit('on-update',[data])
}
</script>

<style lang="scss">
.fssc-users-choice {
    display: flex;
    height: 450px;
    overflow-y: auto;
    .el-tree-node__content {
        position: relative;
        height: 48px;
        border-bottom: 1px solid #D9D9D9;

        // .el-checkbox{
        //   position: absolute;
        //   left: 20px;
        // }
        &:before {
            display: block;
            width: 20px;
            height: 0;
            content: '';
        }

        .el-tree-node__expand-icon {
            color: rgba(89, 89, 89, 1);
        }

        .el-tree-node__expand-icon.is-leaf {
            color: transparent
        }
    }

    .is-current>.el-tree-node__content {
        background: #F8FAFC;
        color: rgba(0, 73, 173, 1);
    }

    .el-radio-group {
        display: block;

        .is-checked {
            background: rgba(248, 250, 252, 1);
        }

        .center-ticket-choice_main_item {

            // padding-left: 27px;
            .el-radio {
                width: 100%;
                height: 48px;

                .el-radio__input {
                    padding-left: 27px;
                }
            }
        }

        // flex-direction: column;
        // justify-content: flex-start;
    }

    &_main {
        // padding: 17px 24px;
        width: 374px;
        height: 100%;
        overflow-y: auto;
        border-right: 1px solid #D9D9D9;
        flex-shrink: 0;
    }

    &_users {
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }
}

.process-dialog-user-footer {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;

    &_result {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;

        &>span {
            font-size: 14px;
            color: #595959;
        }

        &_item {
            position: relative;
            margin-right: 8px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 24px;
            padding: 0 6px;
            border-radius: 2px;
            background: #E6F7FF;
            color: rgba(0, 73, 173, 1);
            font-size: 14px;

            &>.__ui_result_icon {
                position: absolute;
                right: -6px;
                top: -6px;
                display: inline-block;
                width: 17px;
                height: 17px;
                background: url('./assets/icon-delete.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }
        }
    }

    &_option {
        flex-shrink: 0;
    }
}

.fssc-users-search {
    position: relative;
    height: 269px;
    border: 1px solid #D9D9D9;
    background: #fff;

    img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .el-radio-group {
        padding: 20px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        word-break: break-all;

        .center-ticket-choice_main_item {
            margin-right: 15px;
            width: auto;
        }
    }
}
</style>
